<template>
  <div class="bottom-toolbar">
    <suggest-modal
    :suggestVisible="suggestVisible"
    @_submitsModal="_submitsModal"
    @_cancelsModal="_cancelsModal">
    </suggest-modal>
    <ul>
      <el-tooltip class="item" effect="dark" content="意见反馈" placement="left">
        <li @click="_openSuggestModal">
          <i class="el-icon-edit-outline"></i>
        </li>
      </el-tooltip>
      <el-tooltip class="item" effect="dark" content="返回顶部" placement="left">
        <back-to-top></back-to-top>
      </el-tooltip>
    </ul>
  </div>
</template>

<script>
import backToTop from 'comp/backToTop'
import suggestModal from 'comp/suggestModal'
import { mapActions, mapGetters } from 'vuex'
export default {
  name: "bottom-toolbar",
  components: {
    backToTop, suggestModal
  },
  data () {
    return {
      suggestVisible: false,
      commitComment: null
    }
  },
  computed: {
    ...mapGetters(['userToken'])
  },
  methods: {
    _openSuggestModal () {
      this.suggestVisible = true
    },
    _submitsModal (val) {
      this.suggestVisible = val.status
      this.commitComment = val.comment
      console.log(this.commitComment)
      this.doAddComment()
    },
    _cancelsModal (val) {
      this.suggestVisible = val
    },
    doAddComment () {
      let params = {
        usertoken: this.userToken || null,
        context: this.commitComment.context,
        comment_img: this.commitComment.openSuggestImg ? this.commitComment.imgUri : ''
      }
      this._addComment(params)
        .then((res) => {
          console.log(res)
        })
        .catch((err) => {
          console.log(err)
        })
    },
    ...mapActions(['_addComment'])
  }
}
</script>

<style scoped lang="less">
.bottom-toolbar{
  position: fixed;
  bottom: 100px;
  right: 20px;
  li{
    padding: 18px;
    background: #ffffff;
    margin: 16px;
    cursor: pointer;
    i{
      font-size: 16px;
    }
  }
}
</style>
